« Previous Next »

Dark Mode

Bootstrap pages use a white (light) background color by default.

To switch the entire page to a dark theme, add data-bs-theme="dark" to the <html> tag

Default Example

Output 1:

Dark Mode Example

Output 2:

Dark Mode For Components

If you prefer applying the dark theme to only certain components instead of the entire page, add the data-bs-theme="dark" attribute to those specific elements.

For instance, you can apply dark mode to a table by adding the data-bs-theme="dark" attribute directly to the <table> element

Output 3:

Alternatively, you can enable dark mode for a dropdown menu by adding

Example

Output 4:
« Previous Next »